<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
// let years: number = 5;
// // 在元素类型后面加上[]
// let arr: number[] = [1, 2];

// // 或者使用数组泛型
// let arr1: Array<string> = ["1", "2"];
// // 元组
// let x: [string, number] = ["Runoob", 1];
// console.log(x);
// 枚举类型
// enum Color {
//   Red,
//   Green,
//   Blue,
// }
// let c: Color = Color.Blue;
// console.log(c);
// //: void   代表函数没有返回值
// function hello(): void {
//   alert("Hello Runoob");
// }
// function say(x: number, y: number): string {
//   return "nihao";
// }
// :any 任意数据类型
// let x: any = 1;    // 数字类型
// var val: string | number;
// val = 12;

// // ts 接口
// interface IPerson {
//   firstName: string;
//   lastName: string;
//   sayHi: () => string;
// }
// var customer: IPerson = {
//   firstName: "Tom",
//   lastName: "Hanks",
//   sayHi: (): string => {
//     return "Hi there";
//   },
// };
// interface Person {
//   age: number;
// }

// interface Musician extends Person {
//   instrument: string;
// }
// var mycon: Musician = {
//   age: 88,
//   instrument: "888",
// };
// // ts  的类
// class Shape {
//   Area: number;
//   constructor(a: number) {
//     this.Area = a;
//   }
// }

// class Circle extends Shape {
//   static num: number;
//   disp(): void {
//     console.log("圆的面积:  " + this.Area);
//   }
//   say(): void {}
//   //   public（默认） : 公有，可以在任何地方被访问。
//   public mynum: number = 99;
//   public run(): void {}
//   // protected : 受保护，可以被其自身以及其子类和父类访问。
//   protected sex: boolean = false;
//   protected jia() {}
//   // private : 私有，只能被其定义所在的类访问。
//   private shengao: string = "188";
//   private sing() {}
// }

// var obj = new Circle(223);
// obj.disp();

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  // private age: number = 44;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
